<template>
  <div class="mission-detail">
    <!-- 目标标题和发起人 -->
    <a-card :bordered="false" title="目标信息" :loading="loading">
      <a slot="extra" class="focus">
        <a-icon v-if="missionDetail.focus" type="star" theme="filled" @click.prevent="handleCancleFocus"/>
        <a-icon v-else type="star" @click.prevent="handleFocus"/>
      </a>
      <a-descriptions :column="1">
        <a-descriptions-item label="目标内容">{{ missionDetail.missionContent }}</a-descriptions-item>
        <a-descriptions-item label="目标属主">
          <router-link v-if="missionDetail.actorId === actorId" :to="`/my/workbench`">{{ missionDetail.actorName }}</router-link>
          <a v-else :href="`/wall-breaker/#/member/${missionDetail.actorId}`" target="_blank">{{ missionDetail.actorName }}</a>
        </a-descriptions-item>
        <a-descriptions-item label="完成时间">{{ missionDetail.missionDueDate | convertNumberToTime }}</a-descriptions-item>
        <a-descriptions-item label="目前状态">
          <span>
            <a-badge v-if="missionDetail.missionState==='NEW'" status="processing" />
            <a-badge v-if="missionDetail.missionState==='DONE'" status="success" />
            {{ missionDetail.missionStateDesc }}
          </span>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <!-- 目标评分 -->
    <a-card title="目标评分" :bodyStyle="{ padding: '1px 0 0 0'}" :bordered="false" :loading="loading">
      <!-- <a-button slot="extra" type="link" @click="showGradeMissionModal">我来打分</a-button> -->
      <div style="margin:0 auto;width:220px">
        <score :value="missionDetail.averageScore" :height="220"/>
      </div>
    </a-card>

    <!-- 结果列表 -->
    <a-card title="结果列表" class="results" :border="false" :bordered="false" :loading="loading">
      <a-button slot="extra" type="primary" @click="showAddResultModal">新增结果</a-button>
      <a-table
        size="small"
        rowKey="keyResultId"
        :columns="resultsColumns"
        :data-source="missionDetail.keyResultList"
        :pagination="{ pageSize:5 }"
        :loading="resultsLoading"
      >
        <template slot="status" slot-scope="resultRecord">
          <span v-if="resultRecord.keyResultState === 'NEW'"><a-badge status="processing" /> {{ resultRecord.keyResultStateDesc }}</span>
          <span v-if="resultRecord.keyResultState === 'DONE'"><a-badge status="success" /> {{ resultRecord.keyResultStateDesc }}</span>
        </template>
        <span slot="operation" slot-scope="resultRecord" class="table-operation">
          <a @click="deleteKeyResult(resultRecord.keyResultId)" style="margin-right: 10px">删除</a>
          <a v-if="resultRecord.keyResultState === 'NEW'" @click.prevent="finishKeyResult(resultRecord)">完成结果</a>
        </span>
      </a-table>
    </a-card>

    <!-- 模块：评分 -->
    <grade-mission-modal
      ref="gradeMissionModal"
      @finished="getDetail"
    />
    <!-- 模块：编辑任务 -->
    <edit-mission-modal
      ref="editMissionModal"
      @finished="getDetail"
    />
    <!-- 模块：添加结果 -->
    <add-result-modal
      ref="addResultModal"
      @finished="getDetail"
    />
    <!-- 模块：加入团战 -->
    <add-instance-modal
      ref="addInstanceModal"
      @finished="getDetail"
    />
  </div>
</template>

<script>
// tools
import { convertNumberToTime } from '@/utils/handleTime'
import { makeScore } from '@/utils/mock'

// api
import {
  detail,
  deleteKeyResult,
  missionVisit,
  missionFocus,
  missionCancleFocus,
  addKeyResult
} from '@/api/mission'

// 组件
import Score from '@/components/Score'
import Pie from '@/components/Pie'
import GradeMissionModal from './components/grade-mission'
import EditMissionModal from './components/edit-mission'
import AddResultModal from './components/add-result'
import AddInstanceModal from './components/add-instance'

// 常量
import { resultsColumns } from './constants'

import { mapGetters } from 'vuex'

export default {
  name: 'MissionDetail',
  data () {
    return {
      loading: false,
      loadingFoucs: false, // 关注加载
      missionDetail: {
        keyResultList: [],
        averageScore: 0
      },
      resultsLoading: false,
      resultsColumns
    }
  },
  components: {
    Score,
    Pie,
    GradeMissionModal,
    EditMissionModal,
    AddResultModal,
    AddInstanceModal
  },
  mounted () {
    this.getDetail() // 获取详情
    this.missionVisit() // 增加查看次数
  },
  computed: {
    ...mapGetters(['actorId'])
  },
  methods: {
    convertNumberToTime,
    // 获取详情
    async getDetail () {
      try {
        this.loading = true
        const { id } = this.$route.params
        if (!id) { return }
        const content = await detail({
          missionId: id
        })
        this.missionDetail = content
        this.missionDetail.averageScore = makeScore()
      } catch (error) {

      } finally {
        this.loading = false
      }
    },
    // 增加查看次数
    async missionVisit () {
      try {
        const { id } = this.$route.params
        if (!id) { return }
        await missionVisit({
          missionId: id
        })
      } catch (error) {

      }
    },
    // 关注
    async handleFocus () {
      try {
        this.loadingFoucs = true
        const { id } = this.$route.params
        await missionFocus({
          missionId: id
        })
        this.missionDetail.focus = true
      } catch (error) {

      } finally {
        this.loadingFoucs = false
      }
    },
    // 取消关注
    async handleCancleFocus () {
      try {
        this.loadingFoucs = true
        const { id } = this.$route.params
        await missionCancleFocus({
          missionId: id
        })
        this.missionDetail.focus = false
      } catch (error) {

      } finally {
        this.loadingFoucs = false
      }
    },
    // 评分模块
    showGradeMissionModal () {
      this.$refs.gradeMissionModal.show({
        missionId: this.missionDetail.missionId,
        title: `给目标${this.missionDetail.missionId}打分`
      })
    },
    // 增加结果
    showAddResultModal () {
      this.$refs.addResultModal.show({
        id: this.missionDetail.missionId
      })
    },
    // 删除结果
    async deleteKeyResult (keyResultId) {
      try {
        this.resultsLoading = true
        await deleteKeyResult(keyResultId)
        this.getDetail()
      } catch (error) {

      } finally {
        this.resultsLoading = false
      }
    },
    // 完成结果
    async finishKeyResult (record) {
      console.log(record)
      this.resultsLoading = true
      try {
        await addKeyResult({
          id: record.keyResultId,
          missionId: this.missionDetail.missionId,
          content: record.keyResultContent,
          dueDate: record.dueDate,
          state: 'DONE'
        })
      } catch (error) {

      } finally {
        this.resultsLoading = false
        this.getDetail()
      }
    }
  },
  filters: {
    convertNumberToTime: convertNumberToTime
  }
}
</script>

<style lang="less" scoped>
.mission-detail {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 20px 20px;
}
.results {
  grid-column-start: 1;
  grid-column-end: 3;
}

.focus {
  line-height: 32px;
  vertical-align: middle;
  /deep/ .anticon-star {
    font-size: 24px;
    vertical-align: middle;
  }
}
</style>
